<template>
    <div>
        <h2>G6 动画与样式</h2>
        <div ref="container" style="width:100%;height:400px;background:#f5f5f5;"></div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as G6 from '@antv/g6';
import { Line, Circle } from '@antv/g6';
defineOptions({ name: 'AntvG6Demo7' });

const container = ref();

// 注册蚂蚁线（飞线）边类型
class AntLine extends Line {
    onCreate() {
        this.shapeMap.key.animate(
            [
                { lineDashOffset: -20 },
                { lineDashOffset: 0 }
            ],
            {
                duration: 500,
                iterations: Infinity,
            }
        );
    }
}
// 定义动画节点
class BreathingCircle extends Circle {
    onCreate() {
        this.shapeMap.halo.animate([{ lineWidth: 5 }, { lineWidth: 10 }], {
            duration: 1000,
            iterations: Infinity,
            direction: 'alternate',
        });
    }
}
G6.register('edge', 'ant-line', AntLine);
G6.register('node', 'breathing-circle', BreathingCircle);

// 维护一份响应式数据
const nodes = ref([
    {
        id: 'node1',
        type: 'breathing-circle',
        label: '动画节点',
        style: {
            fill: '#ff7875',
            stroke: '#d4380d',
            lineWidth: 2,
            halo: true,
            haloLineWidth: 8,
        },
        x: 200,
        y: 200
    },
    {
        id: 'node2',
        label: '普通节点',
        style: { fill: '#91d5ff', stroke: '#0050b3', lineWidth: 2 },
        x: 400,
        y: 200
    }
]);
const edges = ref([
    {
        source: 'node1',
        target: 'node2',
        type: 'ant-line', // 使用蚂蚁线类型
        style: {
            stroke: '#faad14',
            lineWidth: 2,
            lineDash: [10, 10], // 虚线样式
        },
        label: '动画边'
    }
]);

onMounted(() => {
    const graph = new G6.Graph({
        container: container.value,
        width: 600,
        height: 400,
        layout: { type: 'random' },
        behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'drag-node'],
        data: {
            nodes: nodes.value,
            edges: edges.value
        }
    });
    graph.render();

    // 节点动画
    // setTimeout(() => {
    //     nodes.value = nodes.value.map((node: any) =>
    //         node.id === 'node1'
    //             ? { ...node, x: 400, y: 300 }
    //             : node
    //     );
    //     graph.setData({
    //         nodes: nodes.value,
    //         edges: edges.value
    //     });
    //     graph.render();
    // }, 1000);
});
</script> 